<template>
	<div class="ac_organ_list_item">
		<div class="ac_organ_list_top">
			<div class="ac_organ_list_item_img pointer" @click="gotoDetail()">
				<img :src="item.pic" />
				<div
					class="ac_organ_list_item_status mainbackgroundcolor ac_organ_list_item_status_1"
					v-if="item.startStatus == 0"
				>
					<div
						class="ac_organ_list_item_status_text ac_organ_list_item_status_text_1"
					>
						活动尚未开始
					</div>
				</div>
				<div
					class="ac_organ_list_item_status mainbackgroundcolor ac_organ_list_item_status_2"
					v-if="item.startStatus == 1"
				>
					<div
						class="ac_organ_list_item_status_text ac_organ_list_item_status_text_2"
					>
						活动正在进行中
					</div>
				</div>
				<div
					class="ac_organ_list_item_status mainbackgroundcolor ac_organ_list_item_status_3"
					v-if="item.startStatus == 2"
				>
					<div
						class="ac_organ_list_item_status_text ac_organ_list_item_status_text_3"
					>
						活动已结束
					</div>
				</div>
			</div>
			<div class="ac_organ_list_item_info">
				<div class="ac_organ_list_item_title">
					{{ item.title }}
				</div>
				<div class="ac_organ_list_item_area">
					<div class="ac_organ_list_item_area_item">
						<img
							src="https://res.metaera.hk/resources/assets/images/active/58_1.png"
						/>
						<span>{{ item.address }}</span>
					</div>
					<div class="ac_organ_list_item_area_item">
						<img
							src="https://res.metaera.hk/resources/assets/images/active/59_1.png"
						/>
						<span
							>{{ formatDate(item.start_time) }} 至
							{{ formatDate(item.end_time) }} {{ item.timeZone }}</span
						>
					</div>
				</div>
				<div class="ac_organ_list_item_bottom_time" v-if="type == 0">
					<span>最终编辑时间：{{ formatDate(item.update_time_user) }}</span>
				</div>
				<div class="ac_organ_list_item_bottom_time" v-if="this.showCharts">
					<span>活动总报名人数：{{ this.detail.ticket_count }}人</span>
				</div>
				<div class="ac_organ_list_item_bottom">
					<div class="ac_organ_list_item_bottom_option" v-if="type == 0">
						<div
							class="ac_organ_list_item_bottom_option_item pointer"
							@click="gotoEdit()"
						>
							<span>编辑</span>
						</div>
						<div
							class="ac_organ_list_item_bottom_option_item pointer"
							@click="gotoDel()"
						>
							<span>删除</span>
						</div>
						<div
							class="ac_organ_list_item_bottom_option_item pointer"
							@click="getAcitvityDetail()"
						>
							<span>查看报名数据</span>
						</div>
					</div>

					<div
						class="ac_organ_list_item_aprove_status_1 ac_organ_list_item_aprove_status"
						v-if="item.status == 1 && type == 0"
					>
						已通过
					</div>
					<div
						class="ac_organ_list_item_aprove_status_2 ac_organ_list_item_aprove_status"
						v-if="item.status == 0 && type == 0"
					>
						草稿
					</div>
					<div
						class="ac_organ_list_item_aprove_status_3 ac_organ_list_item_aprove_status"
						v-if="item.status == 2 && type == 0"
					>
						未通过
					</div>
					<div
						class="ac_organ_list_item_aprove_status_4 ac_organ_list_item_aprove_status"
						v-if="item.status == 3 && type == 0"
					>
						审核中
					</div>
				</div>
			</div>
		</div>

		<div v-if="item.status == 2 && type == 0" class="ac_organ_list_bottom">
			未通过原因：{{ item.reason }}
		</div>

		<div class="ac_organ_charts_content" v-if="this.showCharts">
			<div class="ac_organ_charts_content_top">
				<div class="ac_organ_list_item_title ac_organ_list_item_title_echarts">
					{{ item.title }}
				</div>
				<div
					class="ac_organ_charts_content_download pointer"
					@click="getExportData()"
				>
					<img
						src="https://res.metaera.hk/resources/assets/images/active/路径@3x.png"
					/>
					<span>下载报名数据</span>
				</div>
			</div>
			<div
				class="ac_organ_charts_content_table"
				v-if="this.detail.ticketCodes.length > 0"
			>
				<div class="ac_organ_charts_content_table_top">
					<div
						class="ac_organ_charts_content_table_top_item ac_organ_charts_content_table_top_item_left"
					>
						票据名称
					</div>
					<div
						class="ac_organ_charts_content_table_top_item ac_organ_charts_content_table_top_item_left"
					>
						邀请码
					</div>
					<div class="ac_organ_charts_content_table_top_item"> 报名人数 </div>
				</div>

				<div
					class="ac_organ_charts_content_table_item"
					v-for="(item, index) in this.detail.ticketCodes"
					:key="index"
				>
					<div
						class="ac_organ_charts_content_table_content_item ac_organ_charts_content_table_top_item_left"
					>
						{{ item.ticket_name }}
					</div>
					<div
						class="ac_organ_charts_content_table_content_item ac_organ_charts_content_table_top_item_left"
					>
						{{ item.code }}
					</div>
					<div class="ac_organ_charts_content_table_content_item">
						{{ item.count }}
					</div>
				</div>
			</div>
			<div class="ac_organ_list_bottom_charts" id="ac_organ_list_bottom_charts">
			</div>
		</div>
	</div>
</template>

<script>
import * as echarts from "echarts";
import { utils, writeFile } from "xlsx";
import { acitvityDetail, getExportData } from "@/api/home";
export default {
	name: "",
	props: {
		item: {},
		index: 0,
		type: 0, //默认主办方；1、参加的活动
	},
	created() {},

	mounted() {},
	data() {
		return {
			detail: {},
			showCharts: false,
		};
	},
	methods: {
		showUrl(url) {
			if (url == undefined || url.length == 0) {
				return;
			}
			window.open(url, "");
		},

		getExportData() {
			let obj = { activityid: this.item.id };
			getExportData(obj)
				.then((res) => {
					if (res.code == 200) {
						console.log(res.data);
						// 1. 获取数据
						var rows = res.data.list;
						var filename = "活动报名表_" + this.item.id + ".xlsx"; // 文件名
						var headers = [
							"票卷ID",
							"票卷类型",
							"用户名",
							"用户Email",
							"报名时间",
							"邀请人",
							"邀请码",
						];

						// 2. 准备数据
						const data = [headers]; // 第一行是表头
						rows.forEach((row) => {
							// 将对象转换为数组，确保顺序与表头一致
							const rowData = headers.map((header) => {
								// 根据实际数据结构调整
								const key = this.getKeyByHeader(header); // 实现一个方法将表头映射到数据键

								// 特殊处理票务类型字段
								if (key === "type" || header === "票务类型") {
									// 根据type值返回对应的中文描述
									switch (row[key]) {
										case 0:
											return "免费票";
										case 1:
											return "邀请制免费票";
										default:
											return row[key] || "";
									}
								}

								// 其他字段正常返回
								return row[key] || row[header.toLowerCase()] || "";
							});
							data.push(rowData);
						});
						// 3. 创建工作簿
						const workbook = utils.book_new();
						const worksheet = utils.aoa_to_sheet(data);
						utils.book_append_sheet(workbook, worksheet, "Sheet1");

						// 4. 导出文件
						writeFile(workbook, filename || "export.xlsx");
					} else {
						this.$message.error("获取详情失败，请重新获取");
					}
				})
				.catch((error) => {
					this.$message.error(error.message);
				});
		},
		// 辅助方法：将表头映射到数据键
		getKeyByHeader(header) {
			const map = {
				票卷ID: "id",
				票卷类型: "type",
				用户名: "nickname",
				用户Email: "userEmail",
				报名时间: "update_time",
				邀请人: "ticket_name",
				邀请码: "code",
			};
			return map[header] || header.toLowerCase();
		},
		getAcitvityDetail() {
			let obj = { id: this.item.id };
			acitvityDetail(obj)
				.then((res) => {
					if (res.code == 200) {
						this.loading = false;
						this.detail = res.data;
						this.showCharts = true;
						setTimeout(() => {
							this.renderceshi(res.data.ticketCounts);
						}, 500);
					} else {
						this.$message.error("获取活动详情失败，请重新获取");
					}
				})
				.catch((error) => {
					this.$message.error(error.message);
				});
		},
		renderceshi(dataleft) {
			var chartDom = document.getElementById("ac_organ_list_bottom_charts");

			var myChart = echarts.init(chartDom);

			var option;

			var xAxisData = [];
			var seriesData = [];
			for (var i = 0; i < dataleft.length; i++) {
				xAxisData.push(dataleft[i].day.substring(5, 10));
				seriesData.push(dataleft[i].count);
			}
			option = {
				title: {
					text: "每日报名数量", // 表头名称
					left: "left", // 标题位置（居中）
					textStyle: {
						fontSize: 24, // 主标题字体大小
						fontWeight: "bold", // 主标题字体加粗
						color: "#fff", // 主标题字体颜色
					},
				},
				grid: {
					top: 80, // 图表区域距离顶部 60px，增加表头与数据之间的间距
				},
				xAxis: {
					type: "category",
					data: xAxisData,
					axisLine: {
						show: true, // 显示横坐标轴线
						lineStyle: {
							width: 3, // 坐标轴线加粗
							color: "gray", // 坐标轴线颜色为灰色
						},
					},
					axisLabel: {
						show: true, // 显示横坐标文字
						fontSize: 20, // 字体大小
						fontWeight: "bold", // 字体加粗
						color: "white", // 字体颜色为白色
					},
					splitLine: {
						show: false, // 隐藏网格线
					},
				},
				yAxis: {
					type: "value",
					axisLine: {
						show: true, // 显示纵坐标轴线
						lineStyle: {
							width: 3, // 坐标轴线加粗
							color: "gray", // 坐标轴线颜色为灰色
						},
					},
					axisLabel: {
						show: true, // 显示纵坐标文字
						fontSize: 20, // 字体大小
						fontWeight: "bold", // 字体加粗
						color: "white", // 字体颜色为白色
					},
					splitLine: {
						show: false, // 隐藏网格线
					},
				},
				series: [
					{
						data: seriesData,
						type: "line",
						smooth: true,
						lineStyle: {
							width: 4, // 线条宽度
							color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
								{ offset: 0, color: "#9945ff" }, // 起始颜色
								{ offset: 0.2, color: "#8752f3" },
								{ offset: 0.4, color: "#5497d5" },
								{ offset: 0.6, color: "#43b4ca" },
								{ offset: 0.8, color: "#28e0b9" },
								{ offset: 1, color: "#19fb9b" }, // 结束颜色
							]),
						},
					},
				],
			};

			option && myChart.setOption(option);
		},
		close() {
			this.$emit("close");
		},
		refund() {
			this.$emit("refund", this.item);
		},
		cancelOrder() {
			this.$emit("cancelOrder", this.item);
		},
		continueOrder() {
			this.$emit("continueOrder", this.item);
		},
		gotoDetail() {
			this.$emit("gotoDetail", this.item);
		},
		gotoEdit() {
			this.$emit("gotoEdit", this.item.id);
		},
		gotoDel() {
			this.$emit("gotoDel", this.item.id);
		},
		formatDate(dateString) {
			const date = new Date(dateString);
			return date.toLocaleString("zh-CN", {
				year: "numeric",
				month: "2-digit",
				day: "2-digit",
				hour: "2-digit",
				minute: "2-digit",
				hour12: false,
			});
		},
	},
	watch: {},
};
</script>

<style scoped>
.ac_organ_list_item {
	margin-bottom: 30px;
}
.ac_organ_list_top {
	display: flex;
	border-radius: 10px;
	min-height: 190px;
}

.ac_organ_list_item_img {
	width: 30%;
	overflow: hidden;
	align-content: center;
	align-items: center;
}

.ac_organ_list_item_img img {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	opacity: 1;
	object-fit: cover;
	overflow: hidden;
}

.ac_organ_list_item_info {
	width: 70%;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.ac_organ_list_item_top {
	display: flex;
	justify-content: space-between;
	margin-top: 0px;
}

.ac_organ_list_item_aprove_status {
	margin-right: 20px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
	display: flex;
	align-items: center;
	letter-spacing: 0em;

	font-variation-settings: "opsz" auto;
}
.ac_organ_list_item_aprove_status span {
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	line-height: 16px;
	margin-left: 20px;
}
.ac_organ_list_item_aprove_status_1 {
	color: #3ecd8a;
}
.ac_organ_list_item_aprove_status_2 {
	color: #f67348;
}
.ac_organ_list_item_aprove_status_3 {
	color: #ea0000;
}
.ac_organ_list_item_aprove_status_4 {
	color: #3ecd8a;
	display: none;
}

.ac_organ_list_item_status {
	margin-left: 0px;
	margin-top: 14px;
	height: 26px;
	border-radius: 3px;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: space-between;
}

.ac_organ_list_item_status_1 {
	/* 主要色/主要色 */
	background: rgba(2, 86, 255, 0.1);
}
.ac_organ_list_item_status_2 {
	/* 主要色/主要色 */
	background: rgba(62, 205, 138, 0.1);
}
.ac_organ_list_item_status_3 {
	/* 主要色/主要色 */
	background: rgba(170, 170, 170, 0.1);
}

.ac_organ_list_item_status_point {
	margin-left: 10px;
	margin-right: 10px;
	width: 8px;
	height: 8px;
	border-radius: 136px;
	opacity: 1;
}
.ac_organ_list_item_status_point_1 {
	background: linear-gradient(
		45deg,
		#9945ff,
		#8752f3,
		#5497d5,
		#43b4ca,
		#28e0b9,
		#19fb9b
	);
}
.ac_organ_list_item_status_point_2 {
	background: #3ecd8a;
}
.ac_organ_list_item_status_point_3 {
	background: #333333;
}

.ac_organ_list_item_status_text {
	width: 100%;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 12px;
	display: block;
	align-content: center;
	align-items: center;
	letter-spacing: 0em;
	text-align: center;
	font-variation-settings: "opsz" auto;
}

.ac_organ_list_item_status_text_1 {
	/* 主要色/主要色 */
	color: #0256ff;
}

.ac_organ_list_item_status_text_2 {
	color: #3ecd8a;
}

.ac_organ_list_item_status_text_3 {
	color: #333333;
	color: #fff;
}

.ac_organ_list_item_title {
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 8px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: clamp(16px, calc(100vw * 20 / 1280), 26px);
	font-weight: 500;
	line-height: 30px;
	display: flex;
	align-items: center;
	letter-spacing: 0em;

	font-variation-settings: "opsz" auto;
	/* 黑色主色（字段一级） */
	color: #fff;

	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ac_organ_list_item_area {
	margin-top: clamp(10px, calc(100vw * 10 / 1280), 26px);
	margin-left: 20px;
	margin-right: 20px;
}

.ac_organ_list_item_area_item {
	display: flex;
	margin-right: 40px;
	align-content: center;
	align-items: center;
	margin-top: 0px;
	height: 30px;
}

.ac_organ_list_item_area_item img {
	width: 16px;
	height: auto;
	opacity: 1;
}

.ac_organ_list_item_area_item span {
	margin-left: 10px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 12px;
	line-height: 16px;
	text-transform: uppercase;
	letter-spacing: 0em;
	font-variation-settings: "opsz" auto;
	/* 纯白 */
	color: #ffffff;
}

.ac_organ_list_item_bottom {
	margin-left: 20px;
	margin-right: 40px;
	margin-top: 10px;
	display: flex;
	flex: 0 1 auto;
	justify-content: space-between;
}

.ac_organ_list_item_bottom_time span {
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	margin-left: 46px;
	height: 30px;
	font-size: 12px;
	font-weight: normal;
	line-height: 12px;
	display: flex;
	align-items: center;
	letter-spacing: 0em;
	font-variation-settings: "opsz" auto;
	/* 纯白 */
	color: #ffffff;
}

.ac_organ_list_item_bottom_option {
	display: flex;
}

.ac_organ_list_item_bottom_option_item {
	display: flex;
	margin-right: 30px;
	align-items: center;
	border-radius: 4px;
	height: 26px;
	background: rgba(239, 245, 254, 0.1);
	padding-left: 20px;
	padding-right: 20px;
}

.ac_organ_list_item_bottom_option_item img {
	width: 16px;
	height: 16px;
	opacity: 1;
}
.ac_organ_list_item_bottom_option_item span {
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 12px;
	display: flex;
	align-items: center;
	letter-spacing: 0em;
	font-variation-settings: "opsz" auto;
	/* 纯白 */
	color: #ffffff;
}

.ac_organ_list_bottom {
	margin-top: 10px;
	padding-left: 30px;
	height: 60px;
	border-radius: 10px;
	opacity: 1;

	background: #fafafa;

	box-sizing: border-box;
	/* 错误色/错误色 */
	border: 1px solid #ea0000;

	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	line-height: 16px;
	display: flex;
	align-items: center;
	letter-spacing: 0em;

	font-variation-settings: "opsz" auto;
	/* 错误色/错误色 */
	color: #ea0000;
}

.ac_organ_list_item_bottom_ticket {
	height: 40px;
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.ac_organ_list_item_bottom_ticket_left {
	display: flex;
}
.ac_organ_list_item_bottom_ticket_left_item,
.ac_organ_list_item_bottom_ticket_left_item span {
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: clamp(12px, calc(100vw * 14 / 1280), 16px);
	font-weight: normal;
	line-height: 16px;
	display: flex;
	align-items: flex-end;
	letter-spacing: 0em;

	font-variation-settings: "opsz" auto;
	/* 描边色/描边色辅助 */
	color: #333333;
}
.ac_organ_list_item_bottom_ticket_left_item {
	margin-right: clamp(10px, calc(100vw * 15 / 1280), 30px);
}

.ac_organ_list_item_bottom_ticket_right {
	display: flex;
	width: calc(100vw * 260 / 1280);
	min-width: 240px;
	/* max-width: 300px; */
	justify-content: flex-end; /* 将内容居右对齐 */
}

.ac_organ_list_item_bottom_ticket_right_quit {
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: clamp(12px, calc(100vw * 16 / 1280), 20px);
	font-weight: normal;
	line-height: 16px;
	display: flex;
	align-items: center;
	letter-spacing: 0em;

	font-variation-settings: "opsz" auto;
	/* 描边色/描边色辅助 */
	color: #aaaaaa;
}

.ac_organ_list_item_bottom_ticket_right_d {
	margin-left: clamp(16px, calc(100vw * 20 / 1280), 30px);
	display: flex;
}
.ac_organ_list_item_bottom_ticket_right_d_text,
.ac_organ_list_item_bottom_ticket_right_d_text span {
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: clamp(12px, calc(100vw * 16 / 1280), 20px);
	font-weight: normal;
	line-height: 16px;
	display: flex;
	align-items: flex-end;
	letter-spacing: 0em;

	font-variation-settings: "opsz" auto;
	/* 黑色主色（字段一级） */
	color: #333333;
}
.ac_organ_list_item_bottom_ticket_right_d_num {
	height: 42px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: clamp(16px, calc(100vw * 30 / 1280), 30px);
	font-weight: 500;
	line-height: clamp(16px, calc(100vw * 30 / 1280), 30px);
	display: flex;
	align-items: flex-end;

	font-variation-settings: "opsz" auto;
	/* 主要色/主要色 */
	color: #0256ff;
}
</style>

<style></style>
<style scoped>
@media screen and (max-width: 900px) {
	.ac_organ_list_top {
		display: block;
		border-radius: 10px;
		min-height: 190px;
	}

	.ac_organ_list_item_img {
		width: 100%;
	}

	.ac_organ_list_item_info {
		width: 100%;
	}

	.ac_organ_list_item_top {
		margin-top: 10px;
	}
	.ac_organ_list_item_status {
		margin-top: 0px;
	}
	.ac_organ_list_item_status_text {
		margin-right: 6px;
		font-size: 10px;
	}

	.ac_organ_list_item_aprove_status {
		margin-right: 10px;
	}
	.ac_organ_list_item_aprove_status span {
		font-size: 12px;
	}

	.ac_organ_list_item_area {
		margin-top: clamp(10px, calc(100vw * 10 / 1280), 26px);
		margin-left: 20px;
		margin-right: 20px;
		display: block;
	}
	.ac_organ_list_item_area_item {
		margin-top: 10px;
	}
	.ac_organ_list_item_bottom {
		margin-left: 20px;
		margin-right: 0px;
		margin-bottom: 10px;
		margin-top: 20px;
		height: 60px;
	}

	.ac_organ_list_item_bottom_ticket {
		height: auto;
		width: 100%;
		display: block;
	}
	.ac_organ_list_item_bottom_ticket_right {
		display: flex;
		width: 100%;
		min-width: 240px;
	}
}
</style>

<style scoped>
@media screen and (max-width: 900px) {
	.ac_organ_charts_content {
		display: none;
	}
}

.ac_organ_charts_content {
	display: block;
	margin-top: 40px;
	padding-top: clamp(20px, calc(100vw * 26 / 1280), 36px);
	padding-left: 10px;
	padding-right: 10px;
	/* height: 600px; */
	border-radius: 10px;
	background: #1f1f26;
}
.ac_organ_list_bottom_charts {
	margin-top: 40px;
	height: 400px;
}

.ac_organ_charts_content_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ac_organ_list_item_title_echarts {
	margin-left: 4px !important;
	margin-top: 0px;
	line-height: clamp(16px, calc(100vw * 20 / 1280), 26px);
}

.ac_organ_charts_content_download {
	border-radius: 4px;
	background: #52525d;
	display: flex;
	align-content: center;
	align-items: center;
	padding-left: clamp(12px, calc(100vw * 14 / 1280), 16px);
	padding-right: clamp(12px, calc(100vw * 14 / 1280), 16px);
	padding-top: clamp(12px, calc(100vw * 14 / 1280), 16px);
	padding-bottom: clamp(12px, calc(100vw * 14 / 1280), 16px);
}
.ac_organ_charts_content_download img {
	width: clamp(12px, calc(100vw * 14 / 1280), 16px);
	height: clamp(12px, calc(100vw * 14 / 1280), 16px);
	margin-right: 10px;
}
.ac_organ_charts_content_download span {
	font-family: AlibabaPuHuiTi;
	font-size: clamp(12px, calc(100vw * 14 / 1280), 16px);
	font-weight: normal;
	line-height: 12px;
	display: flex;
	align-items: center;
	letter-spacing: normal;
	/* 纯白 */
	color: #ffffff;
}

.ac_organ_charts_content_table_top {
	background: #444449;
	height: 34px;
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	align-items: center;
	padding-left: 20px;
	padding-right: 20px;
}

.ac_organ_charts_content_table_top_item {
	font-family: AlibabaPuHuiTi;
	font-size: 12px;
	font-weight: normal;
	line-height: 16px;
	text-transform: uppercase;
	letter-spacing: normal;
	/* 纯白 */
	color: #ffffff;
	width: 30%;
	text-align: center;
}

.ac_organ_charts_content_table_top_item_left {
	text-align: left !important;
}

.ac_organ_charts_content_table_item {
	display: flex;
	height: 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 20px;
	padding-right: 20px;
	border-bottom: 2px solid #444449; /* 设置下边框为黑色，宽度为2px */
}

.ac_organ_charts_content_table_content_item {
	font-family: AlibabaPuHuiTi;
	font-size: 16px;
	font-weight: bold;
	line-height: 15px;
	text-transform: uppercase;
	letter-spacing: normal;
	/* 纯白 */
	color: #ffffff;
	width: 30%;
	text-align: center;
	align-items: center;
}
</style>
